<template>
<baseDrawer ref="drawerRef" :title="drawerTitle" @confirm="handleSubmit" @close="handleClose">
	<el-form ref="formRef" :model="formData" label-width="100px" :rules="rules">
			<el-form-item label="账号：" prop="account">
				<div class="w-80">
					<el-input v-model="formData.account" placeholder="请输入账号" :disabled="drawerType != 'add'" clearable />
                    <div class="el-form-tips">6-20位，包含数字、字母、下划线，以字母开头</div>
				</div>
			</el-form-item>
            <el-form-item label="头像：" prop="avatar">
					<div>
						<imageUpload v-model="formData.avatar" promptText="建议尺寸：100*100" :limit="1" />
					</div>
				</el-form-item>
			<el-form-item label="分组：" prop="role_id">
				<el-select class="w-80" placeholder="请选择分组" clearable v-model="formData.group_id">
					<el-option v-for="(item, index) in groupOptionsData" :key="index" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="密码：" prop="password">
				<div class="w-80">
					<el-input v-model="formData.password" placeholder="请输入密码" type="password" show-password clearable></el-input>
                    <div class="el-form-tips">6-16位，同时包含字母、数字、特殊符号</div>
                </div>
			</el-form-item>
			<el-form-item label="确认密码：" prop="password_confirm">
				<div class="w-80">
					<el-input
						v-model="formData.password_confirm"
						placeholder="请输入确认密码"
						show-password
						type="password"
						clearable
					></el-input>
                    <div class="el-form-tips">6-16位，同时包含字母、数字、特殊符号</div>
				</div>
			</el-form-item>
			<el-form-item label="手机号：" prop="mobile">
				<div class="w-80">
					<el-input v-model="formData.mobile" placeholder="请输入手机号" clearable></el-input>
				</div>
			</el-form-item>
            <el-form-item label="昵称：" prop="nickname">
				<div class="w-80">
					<el-input v-model="formData.nickname" placeholder="请输入昵称" clearable />
				</div>
			</el-form-item>
			<el-form-item label="真实姓名：" prop="real_name">
				<div class="w-80">
					<el-input v-model="formData.real_name" placeholder="请输入真实姓名" clearable />
				</div>
			</el-form-item>
			<el-form-item label="邮箱：" prop="email">
				<div class="w-80">
					<el-input v-model="formData.email" placeholder="请输入邮箱" clearable></el-input>
				</div>
			</el-form-item>
			<el-form-item label="生日：" prop="birthday">
				<div class="w-80">
					<el-date-picker v-model="formData.birthday" type="date" placeholder="请选择生日" clearable />
				</div>
			</el-form-item>
			<el-form-item label="性别：">
				<div>
					<div>
						<el-radio-group v-model="formData.sex">
							<el-radio :label="1">男</el-radio>
							<el-radio :label="2">女</el-radio>
							<el-radio :label="0">未知</el-radio>
						</el-radio-group>
					</div>
				</div>
			</el-form-item>
			<el-form-item label="身份证号：" prop="id_card">
				<div class="w-80">
					<el-input v-model="formData.id_card" placeholder="请输入身份证号" clearable></el-input>
				</div>
			</el-form-item>
			<el-form-item label="状态：">
				<el-radio-group v-model="formData.status">
					<el-radio :label="1">正常</el-radio>
					<el-radio :label="0">禁用</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
</baseDrawer>
</template>

<script setup lang="ts" name="userEdit">
import { ref, shallowRef, reactive, computed, onMounted } from 'vue';
import type { FormInstance } from 'element-plus';
import { userDetail, userAdd, userEdit } from '/@/api/user/user';
import { groupAll } from '/@/api/user/group';

const drawerRef = ref(null);

const drawerType = ref('add');

const drawerTitle = computed(() => {
	return drawerType.value == 'add' ? '添加用户' : '编辑用户';
});

const emit = defineEmits(['submit', 'close']);

const formRef = shallowRef<FormInstance>();

const formData = reactive({
	id: 0,
	group_id: '',
	account: '',
	password: '',
	password_confirm: '',
	nickname: '',
	real_name: '',
	birthday: '',
	id_card: '',
	avatar: '',
	sex: 0,
	mobile: '',
	email: '',
	status: 1,
});

const equalToPassword = (rule, value, callback) => {
	if (formData.password !== value) {
		callback(new Error('两次的输入密码不一致'));
	} else {
		callback();
	}
};

const rules = reactive({
	account: [{ required: true, message: '请输入账号', trigger: ['blur'] }],
	mobile: [{ required: true, message: '请输入手机号', trigger: ['blur'] }],
	password: [{ required: true, message: '请输入密码', trigger: ['blur'] }],
	password_confirm: [
		{ required: true, message: '请输入确认密码', trigger: ['blur'] },
		{ required: true, validator: equalToPassword, trigger: ['blur'] },
	],
});

const groupOptionsData = ref([]);

const setOptionsData = async () => {
	groupOptionsData.value = await groupAll();
};

const handleSubmit = async () => {
	await formRef.value?.validate(async (valid: boolean) => {
		if (!valid) return;
		drawerType.value == 'add' ? await userAdd(formData) : await userEdit(formData);
		drawerRef.value?.close();
		emit('submit');
	});
};

const setFormData = async (row: any, callback: any) => {
	const data = await userDetail({
		id: row.id,
	});

	for (const key in formData) {
		if (data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	callback();
};

const handleClose = () => {
	emit('close');
};

const open = (type = 'add') => {
	drawerType.value = type;
    if(type == 'edit') {
        rules.password[0].required = false;
        rules.password_confirm[0].required = false;
        rules.password_confirm[1].required = false;
    }
	drawerRef.value?.open();
};

onMounted(() => {
	setOptionsData();
});

defineExpose({
	open,
	setFormData,
});
</script>
